<!--基础排行数据
isImg：是否显示图片
cateName：分类名称
itemList：输入数据，列表
limit: 最多多少个
-->
<template>
	<el-card body-class="warpper" shadow="hover">
		<div class="cate-name-div">
			<el-tag type="info" class="cate-name">{{ cateName }}</el-tag>
		</div>
		<div v-for="(item, index) in itemList">
			<el-row class="item-list">
				<el-col :span="1"></el-col>
				<el-col :span="3">
					<span
						class="num"
						:class="
							index === 0
								? 'one'
								: index === 1
									? 'two'
									: index === 2
										? 'three'
										: 'num'
						"
						>{{ index + 1 }}</span
					>
				</el-col>
				<el-col :span="16">
					<span class="title" 	@click="to(item.id)">{{ item.title }}</span>
				</el-col>
				<el-col v-if="type ==='view'" :span="4"><span class="tag">{{ (item.view /10000000).toFixed(0)}} 亿</span></el-col>
				<el-col v-if="type ==='rating'" :span="4"><span class="tag">{{ item.ratingsNumber}}</span></el-col>
				<el-col :span="1"></el-col>
			</el-row>
			<div v-if="state.isImg && index === 0">
				<el-row>
					<el-col :span="12">
						<el-image class="img" :src="item.img" />
					</el-col>
					<el-col :span="12">
						<div class="font">
							作者：<span style="font-weight: 600"> {{ item.authorName }}</span>
						</div>
						<div class="font">
							<el-tag v-for="tag in item.tagList">{{ tag }}</el-tag>
						</div>
						<div class="font">
							{{ item.introduction }}
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</el-card>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps<{
	type:'view'
	title: any
	cateName: String
	itemList: Array
}>()

const state = reactive({
	limit: 10,
	isImg: true,
})

/**
 * 详情页跳转
 * @param id
 */
function to(id: any) {
	router.push(`/itemInfo/${id}`)
}
</script>
<style scoped>
:deep(.el-tag) {
	margin-right: 10px;
}
/**盒子外层样式 **/
:deep(.warpper) {
	width: 100%;
	padding-top: 0px;
	font-family:
		Microsoft Yahei,
		SimSun,
		Tahoma,
		arial,
		SimHei,
		sans-serif;
}
.cate-name-div {
	width: 100%;
	height: 20px;
	margin-bottom: 15px;
	.cate-name {
		padding: 2px 15px;
		font-weight: 400;
		color: #333333;
		background-color: #f5f5f5;
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
		font-size: 16px;
		padding: 8px 26px;
		cursor: pointer;
	}
	.cate-name:hover {
		color: #fa6976;
		background-color: #f6ebeb;
	}
}
.item-list {
	padding-bottom: 10px;
	.num {
		display: inline-block;
		width: 24px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		font-size: 14px;
		border: 1px solid #ededed;
		border-radius: 12px;
	}
	.title {
		font-size: 14px;
		color: #333333;
		cursor: pointer;
	}
	.title:hover {
		color: #fa6976;
	}
	.tag {
		font-size: 14px;
	}
}
.img {
	width: 172px;
	height: 230px;
	padding-bottom: 10px;
}
.font {
	font-size: 14px;
	margin-bottom: 20px;
}
.one {
	background-color: #fae606;
}
.two {
	background-color: #e4e4ef;
}
.three {
	background-color: #ee6849;
}
</style>
